<template>
  <div class="HomeMain">
    <div class="HomeText">欢迎进入东软环保监督系统</div>
    <MapChart></MapChart>
    <div class="HomeImage"></div>
  </div>
</template>
<script setup>
import MapChart from '@/components/echarts/MapChart.vue'
</script>

<style scoped lang="scss">
.HomeMain {
  width: 100%;
  height: 100%; /* 确保有足够的高度 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* 保持列方向 */
  justify-content: space-between; /* 使内容在垂直方向上均匀分布，最后一项靠下 */
  align-items: center; /* 水平居中 */

  .HomeImage {
    height: 150px;
    width: 100%;
    background-image: url('../../../public/icons/HomeMainBg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .HomeText {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 15px; /* 文本和图片之间的间距 */
  }
}
</style>
